SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Real-time computer graphics</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Real-time computer graphics</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1246091330">

/* start https://en.wikipedia.org/ */

.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><table class="sidebar nomobile nowraplinks"><tbody><tr><th class="sidebar-title"><a href="3D_computer_graphics" title="3D computer graphics">Three-dimensional (3D)<br>computer graphics</a></th></tr><tr><td class="sidebar-image"></td></tr><tr><th class="sidebar-heading">

Fundamentals</th></tr><tr><td class="sidebar-content hlist">

<ul><li><a href="3D_modeling" title="3D modeling">Modeling</a></li>

<li><a href="3D_scanning" title="3D scanning">Scanning</a></li>

<li><a href="3D_rendering" title="3D rendering">Rendering</a></li>

<li><a href="3D_printing" title="3D printing">Printing</a></li></ul></td>

</tr><tr><th class="sidebar-heading">

Primary uses</th></tr><tr><td class="sidebar-content hlist">

<ul><li><a href="3D_model" class="mw-redirect" title="3D model">3D models</a></li>

<li><a href="Computer-aided_design" title="Computer-aided design">Computer-aided design</a></li>

<li><a href="Graphic_design" title="Graphic design">Graphic design</a></li>

<li><a href="Video_game" title="Video game">Video games</a></li>

<li><a href="Visual_effects" title="Visual effects">Visual effects</a></li>

<li><a href="Visualization_(graphic)" class="mw-redirect" title="Visualization (graphic)">Visualization</a></li>

<li><a href="Virtual_engineering" title="Virtual engineering">Virtual engineering</a></li>

<li><a href="Virtual_reality" title="Virtual reality">Virtual reality</a></li>

<li><a href="Virtual_cinematography" title="Virtual cinematography">Virtual cinematography</a></li></ul></td>

</tr><tr><th class="sidebar-heading">

Related topics</th></tr><tr><td class="sidebar-content hlist">

<ul><li><a href="Computer-generated_imagery" title="Computer-generated imagery">Computer-generated imagery <span style="font-size: 85%;">(CGI)</span></a></li>

<li><a href="Animation" title="Animation">Animation</a>

<ul><li><a href="Computer_animation" title="Computer animation">computer</a></li>

<li><a href="Skeletal_animation" title="Skeletal animation">skeletal</a></li></ul></li>

<li><a href="3D_display" title="3D display">3D display</a></li>

<li><a href="Wire-frame_model" title="Wire-frame model">Wire-frame model</a></li>

<li><a href="Texture_mapping" title="Texture mapping">Texture mapping</a></li>

<li><a href="Motion_capture" title="Motion capture">Motion capture</a></li>

<li><a href="Crowd_simulation" title="Crowd simulation">Crowd simulation</a></li>

<li><a href="Global_illumination" title="Global illumination">Global illumination</a></li>

<li><a href="Volume_rendering" title="Volume rendering">Volume rendering</a></li></ul></td>

</tr><tr><td class="sidebar-navbar"><style data-mw-deduplicate="TemplateStyles:r1239400231">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></td></tr></tbody></table>

<p><b>Real-time computer graphics</b> or <b>real-time rendering</b> is the sub-field of <a href="Computer_graphics" title="Computer graphics">computer graphics</a> focused on producing and analyzing images in <a href="Real-time_computing" title="Real-time computing">real time</a>. The term can refer to anything from rendering an application's graphical user interface (<a href="Graphical_user_interface" title="Graphical user interface">GUI</a>) to real-time <a href="Image_analysis" title="Image analysis">image analysis</a>, but is most often used in reference to interactive <a href="3D_computer_graphics" title="3D computer graphics">3D computer graphics</a>, typically using a <a href="Graphics_processing_unit" title="Graphics processing unit">graphics processing unit</a> (GPU). One example of this concept is a <a href="Video_game" title="Video game">video game</a> that rapidly renders changing 3D environments to produce an illusion of motion.

</p><p>Computers have been capable of generating 2D images such as simple lines, images and <a href="Polygon" title="Polygon">polygons</a> in real time since their invention. However, quickly rendering detailed 3D objects is a daunting task for traditional <a href="Von_Neumann_architecture" title="Von Neumann architecture">Von Neumann architecture</a>-based systems. An early workaround to this problem was the use of <a href="Sprite_(computer_graphics)" title="Sprite (computer graphics)">sprites</a>, <a href="2D_computer_graphics" title="2D computer graphics">2D images</a> that could imitate 3D graphics.

</p><p>Different techniques for <a href="Rendering_(computer_graphics)" title="Rendering (computer graphics)">rendering</a> now exist, such as <a href="Real-time_ray_tracing" class="mw-redirect" title="Real-time ray tracing">ray-tracing</a> and <a href="Rasterisation" title="Rasterisation">rasterization</a>. Using these techniques and advanced hardware, computers can now render images quickly enough to create the illusion of motion while simultaneously accepting user input. This means that the user can respond to rendered images in real time, producing an interactive experience.

</p>

<div class="mw-heading mw-heading2"><h2 id="Principles_of_real-time_3D_computer_graphics">Principles of real-time 3D computer graphics</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div role="note" class="hatnote navigation-not-searchable">Main article: <a href="3D_computer_graphics" title="3D computer graphics">3D computer graphics</a></div>

<p>The goal of computer graphics is to generate <a href="Computer-generated_imagery" title="Computer-generated imagery">computer-generated images</a>, or <a href="Film_frame" title="Film frame">frames</a>, using certain desired metrics. One such metric is the number of <a href="Image-based_modeling_and_rendering" title="Image-based modeling and rendering">frames generated</a> in a given second. Real-time computer graphics systems differ from traditional (i.e., non-real-time) rendering systems in that non-real-time graphics typically rely on <a href="Ray_tracing_(graphics)" title="Ray tracing (graphics)">ray tracing</a>. In this process, millions or billions of rays are traced from the <a href="Virtual_camera_system" title="Virtual camera system">camera</a> to the <a href="Virtual_world" title="Virtual world">world</a> for detailed rendering—this expensive operation can take hours or days to render a single frame.

</p>

<p>Real-time graphics systems must render each image in less than 1/30th of a second. Ray tracing is far too slow for these systems; instead, they employ the technique of <a href="Z-buffering" title="Z-buffering">z-buffer</a> <a href="Triangle_rasterization" class="mw-redirect" title="Triangle rasterization">triangle rasterization</a>. In this technique, every object is decomposed into individual primitives, usually triangles. Each triangle gets <a href="Shader#Vertex_shaders" title="Shader">positioned, rotated and scaled</a> on the screen, and <a href="Rasterisation" title="Rasterisation">rasterizer</a> hardware (or a software emulator) generates pixels inside each triangle. These triangles are then decomposed into atomic units called <a href="Fragment_(computer_graphics)" title="Fragment (computer graphics)">fragments</a> that are suitable for displaying on a <a href="Computer_monitor" title="Computer monitor">display screen</a>. The fragments are drawn on the screen using a color that is computed in several steps. For example, a <a href="Texture_mapping" title="Texture mapping">texture</a> can be used to "paint" a triangle based on a stored image, and then <a href="Shadow_mapping" title="Shadow mapping">shadow mapping</a> can alter that triangle's colors based on line-of-sight to light sources.

</p>

<div role="note" class="hatnote navigation-not-searchable">See also: <a href="Level_of_detail_(computer_graphics)" title="Level of detail (computer graphics)">Level of detail (computer graphics)</a></div>

<div class="mw-heading mw-heading3"><h3 id="Video_game_graphics">Video game graphics</h3></div>

<p>Real-time graphics optimizes image quality subject to time and hardware constraints. GPUs and other advances increased the image quality that real-time graphics can produce. GPUs are capable of handling millions of triangles per frame, and modern <a href="DirectX" title="DirectX">DirectX</a>/<a href="OpenGL" title="OpenGL">OpenGL</a> class hardware is capable of generating complex effects, such as <a href="Shadow_volume" title="Shadow volume">shadow volumes</a>, <a href="Motion_blur" class="mw-redirect" title="Motion blur">motion blurring</a>, and <a href="Shader#Geometry_shaders" title="Shader">triangle generation</a>, in real-time. The advancement of real-time graphics is evidenced in the progressive improvements between actual <a href="Gameplay" title="Gameplay">gameplay</a> graphics and the pre-rendered <a href="Cutscenes" class="mw-redirect" title="Cutscenes">cutscenes</a> traditionally found in video games.<sup id="cite_ref-hoso_1-0" class="reference"><a href="#cite_note-hoso-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Cutscenes are typically rendered in real-time—and may be <a href="Interactivity" title="Interactivity">interactive</a>.<sup id="cite_ref-tvge_2-0" class="reference"><a href="#cite_note-tvge-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Although the gap in quality between real-time graphics and traditional off-line graphics is narrowing, offline rendering remains much more accurate.

</p>

<div class="mw-heading mw-heading3"><h3 id="Advantages">Advantages</h3></div>

<p>Real-time graphics are typically employed when interactivity (e.g., player feedback) is crucial. When real-time graphics are used in films, the director has complete control of what has to be drawn on each frame, which can sometimes involve lengthy decision-making. Teams of people are typically involved in the making of these decisions.

</p><p>In real-time computer graphics, the user typically operates an input device to influence what is about to be drawn on the display. For example, when the user wants to move a character on the screen, the system updates the character's position before drawing the next frame. Usually, the display's response-time is far slower than the input device—this is justified by the immense difference between the (fast) response time of a human being's motion and the (slow) <a href="Persistence_of_vision" title="Persistence of vision">perspective speed of the human visual system</a>. This difference has other effects too: because input devices must be very fast to keep up with human motion response, advancements in input devices (e.g., the current Wii remote) typically take much longer to achieve than comparable advancements in display devices.

</p><p>Another important factor controlling real-time computer graphics is the combination of <a href="Game_physics" title="Game physics">physics</a> and <a href="Computer_animation" title="Computer animation">animation</a>. These techniques largely dictate what is to be drawn on the screen—especially <i>where</i> to draw objects in the scene. These techniques help realistically imitate real world behavior (the <a href="Dimension#Time" title="Dimension">temporal dimension</a>, not the <a href="Dimension" title="Dimension">spatial dimensions</a>), adding to the computer graphics' degree of realism.

</p><p>Real-time previewing with <a href="Graphics_software" title="Graphics software">graphics software</a>, especially when adjusting <a href="Computer_graphics_lighting" title="Computer graphics lighting">lighting effects</a>, can increase work speed.<sup id="cite_ref-dili_3-0" class="reference"><a href="#cite_note-dili-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> Some parameter adjustments in <a href="Fractal_generating_software" class="mw-redirect" title="Fractal generating software">fractal generating software</a> may be made while viewing changes to the image in real time.

</p>

<div class="mw-heading mw-heading2"><h2 id="Rendering_pipeline">Rendering pipeline</h2></div>

<p>The <a href="Graphics_pipeline" title="Graphics pipeline">graphics rendering pipeline</a> ("rendering pipeline" or simply "pipeline") is the foundation of real-time graphics.<sup id="cite_ref-retire_4-0" class="reference"><a href="#cite_note-retire-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> Its main function is to render a two-dimensional image in relation to a virtual camera, three-dimensional objects (an object that has width, length, and depth), light sources, lighting models, textures and more.

</p>

<div class="mw-heading mw-heading3"><h3 id="Architecture">Architecture</h3></div>

<p>The architecture of the real-time rendering pipeline can be divided into conceptual stages: application, geometry and <a href="Rasterization" class="mw-redirect" title="Rasterization">rasterization</a>.

</p>

<div class="mw-heading mw-heading3"><h3 id="Application_stage">Application stage</h3></div>

<p>The application stage is responsible for generating "scenes", or 3D settings that are drawn to a 2D display. This stage is implemented in software that developers optimize for performance. This stage may perform processing such as <a href="Collision_detection" title="Collision detection">collision detection</a>, speed-up techniques, animation and force feedback, in addition to handling user input.

</p><p>Collision detection is an example of an operation that would be performed in the application stage. Collision detection uses algorithms to detect and respond to collisions between (virtual) objects. For example, the application may calculate new positions for the colliding objects and provide feedback via a force feedback device such as a vibrating game controller.

</p><p>The application stage also prepares graphics data for the next stage. This includes texture animation, animation of 3D models, animation via <a href="Geometric_transformation" title="Geometric transformation">transforms</a>, and geometry morphing. Finally, it produces <a href="Geometric_primitive" title="Geometric primitive">primitives</a> (points, lines, and triangles) based on scene information and feeds those primitives into the geometry stage of the pipeline.

</p>

<div class="mw-heading mw-heading3"><h3 id="Geometry_stage">Geometry stage</h3></div>

<div role="note" class="hatnote navigation-not-searchable">Main article: <a href="Polygonal_modeling" title="Polygonal modeling">Polygonal modeling</a></div>

<p>The geometry stage manipulates polygons and vertices to compute what to draw, how to draw it and where to draw it. Usually, these operations are performed by specialized hardware or GPUs.<sup id="cite_ref-frpi_5-0" class="reference"><a href="#cite_note-frpi-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> Variations across graphics hardware mean that the "geometry stage" may actually be implemented as several consecutive stages.

</p>

<div class="mw-heading mw-heading4"><h4 id="Model_and_view_transformation">Model and view transformation</h4></div>

<p>Before the final model is shown on the output device, the model is transformed onto multiple spaces or <a href="Coordinate_system" title="Coordinate system">coordinate systems</a>. Transformations move and manipulate objects by altering their vertices. <i>Transformation</i> is the general term for the four specific ways that manipulate the shape or position of a point, line or shape.

</p>

<div class="mw-heading mw-heading4"><h4 id="Lighting">Lighting</h4></div>

<p>In order to give the model a more realistic appearance, one or more light sources are usually established during transformation. However, this stage cannot be reached without first transforming the 3D scene into view space. In view space, the observer (camera) is typically placed at the origin. If using a <a href="Cartesian_coordinate_system#Orientation_and_handedness" title="Cartesian coordinate system">right-handed</a> coordinate system (which is considered standard), the observer looks in the direction of the negative z-axis with the y-axis pointing upwards and the x-axis pointing to the right.

</p>

<div class="mw-heading mw-heading4"><h4 id="Projection">Projection</h4></div>

<div role="note" class="hatnote navigation-not-searchable">Main article: <a href="Graphical_projection" class="mw-redirect" title="Graphical projection">Graphical projection</a></div>

<p>Projection is a transformation used to represent a 3D model in a 2D space. The two main types of projection are <a href="Orthographic_projection" title="Orthographic projection">orthographic projection</a> (also called parallel) and <a href="Perspective_(graphical)" title="Perspective (graphical)">perspective projection</a>. The main characteristic of an orthographic projection is that parallel lines remain parallel after the transformation. Perspective projection utilizes the concept that if the distance between the observer and model increases, the model appears smaller than before. Essentially, perspective projection mimics human sight.

</p>

<div class="mw-heading mw-heading4"><h4 id="Clipping">Clipping</h4></div>

<p><a href="Clipping_(computer_graphics)" title="Clipping (computer graphics)">Clipping</a> is the process of removing primitives that are outside of the view box in order to facilitate the rasterizer stage. Once those primitives are removed, the primitives that remain will be drawn into new triangles that reach the next stage.

</p>

<div class="mw-heading mw-heading4"><h4 id="Screen_mapping">Screen mapping</h4></div>

<p>The purpose of screen mapping is to find out the coordinates of the primitives during the clipping stage.

</p>

<div class="mw-heading mw-heading4"><h4 id="Rasterizer_stage">Rasterizer stage</h4></div>

<p>The rasterizer stage applies color and turns the graphic elements into pixels or picture elements.

</p>

/* start https://en.wikipedia.org/ */

.mw-parser-output .div-col{margin-top:0.3em;column-width:30em}.mw-parser-output .div-col-small{font-size:90%}.mw-parser-output .div-col-rules{column-rule:1px solid #aaa}.mw-parser-output .div-col dl,.mw-parser-output .div-col ol,.mw-parser-output .div-col ul{margin-top:0}.mw-parser-output .div-col li,.mw-parser-output .div-col dd{page-break-inside:avoid;break-inside:avoid-column}

/* end https://en.wikipedia.org/ */

</style><div class="div-col">

<ul><li><a href="Bounding_interval_hierarchy" title="Bounding interval hierarchy">Bounding interval hierarchy</a></li>

<li><a href="Demoscene" title="Demoscene">Demoscene</a></li>

<li><a href="Geometry_instancing" title="Geometry instancing">Geometry instancing</a></li>

<li><a href="Optical_feedback" title="Optical feedback">Optical feedback</a></li>

<li><a href="Quartz_Composer" title="Quartz Composer">Quartz Composer</a></li>

<li><a href="Real_time_(media)" title="Real time (media)">Real time (media)</a></li>

<li><a href="Real-time_raytracing" class="mw-redirect" title="Real-time raytracing">Real-time raytracing</a></li>

<li><a href="Tessellation_(computer_graphics)" title="Tessellation (computer graphics)">Tessellation (computer graphics)</a></li>

<li><a href="Video_art" title="Video art">Video art</a></li>

<li><a href="Video_display_controller" title="Video display controller">Video display controller</a></li></ul>

</div>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite id="CITEREFSpraul2013" class="citation book cs1">Spraul, V. Anton (2013). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=fvSbCgAAQBAJ&pg=PA86"><i>How Software Works: The Magic Behind Encryption, CGI, Search Engines and Other Everyday Technologies</i></a>. No Starch Press. p. 86. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>978-1593276669</bdi><span class="reference-accessdate">. Retrieved <span class="nowrap">24 September</span> 2017</span>.</cite></span>

</li>

<li id="cite_note-tvge-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-tvge_2-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFWolf2008" class="citation book cs1">Wolf, Mark J. P. (2008). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=XiM0ntMybNwC&pg=PA86"><i>The Video Game Explosion: A History from PONG to Playstation and Beyond</i></a>. ABC-CLIO. p. 86. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>9780313338687</bdi><span class="reference-accessdate">. Retrieved <span class="nowrap">24 September</span> 2017</span>.</cite></span>

</li>

<li id="cite_note-dili-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-dili_3-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFBirn2013" class="citation book cs1">Birn, Jeremy (2013). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=IRrsAQAAQBAJ&pg=PA442"><i>Digital Lighting and Rendering: Edition 3</i></a>. New Riders. p. 442. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>9780133439175</bdi><span class="reference-accessdate">. Retrieved <span class="nowrap">24 September</span> 2017</span>.</cite></span>

</li>

<li id="cite_note-retire-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-retire_4-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFAkenine-MöllerEric_HainesNaty_Hoffman2008" class="citation book cs1">Akenine-Möller, Tomas; Eric Haines; Naty Hoffman (2008). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=g_PRBQAAQBAJ&pg=PA11"><i>Real-Time Rendering, Third Edition: Edition 3</i></a>. CRC Press. p. 11. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>9781439865293</bdi><span class="reference-accessdate">. Retrieved <span class="nowrap">22 September</span> 2017</span>.</cite></span>

</li>

<li id="cite_note-frpi-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-frpi_5-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFBoreskoEvgeniy_Shikin2013" class="citation book cs1">Boresko, Alexey; Evgeniy Shikin (2013). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=W4bSBQAAQBA&pg=PA5"><i>Computer Graphics: From Pixels to Programmable Graphics Hardware</i></a>. CRC Press. p. 5. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>9781482215571</bdi><span class="reference-accessdate">. Retrieved <span class="nowrap">22 September</span> 2017</span>.</cite></span>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="Bibliography">Bibliography</h2></div>

<ul><li><cite id="CITEREFMöller,_TomasHaines,_Eric1999" class="citation book cs1">Möller, Tomas; <a href="Eric_Haines" title="Eric Haines">Haines, Eric</a> (1999). <i>Real-Time Rendering</i> (1st ed.). Natick, MA: A K Peters, Ltd.</cite></li>

<li><cite id="CITEREFSalvator,_Dave2001" class="citation web cs1">Salvator, Dave (21 June 2001). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20080517001222/http://www.extremetech.com/article2/">"3D Pipeline"</a>. <i>Extremetech.com</i>. Extreme Tech. Archived from <a rel="nofollow" class="external text" href="http://www.extremetech.com/article2/">the original</a> on 17 May 2008<span class="reference-accessdate">. Retrieved <span class="nowrap">2 Feb</span> 2007</span>.</cite></li>

<li><cite id="CITEREFMalhotra,_Priya2002" class="citation thesis cs1">Malhotra, Priya (July 2002). <a rel="nofollow" class="external text" href="http://hdl.handle.net/10919/35382"><i>Issues involved in Real-Time Rendering of Virtual Environments</i></a> (Master's). Blacksburg, VA: Virginia Tech. pp. <span class="nowrap">20–</span>31. <a href="Hdl_(identifier)" class="mw-redirect" title="Hdl (identifier)">hdl</a>:<a rel="nofollow" class="external text" href="https://hdl.handle.net/10919%2F35382">10919/35382</a><span class="reference-accessdate">. Retrieved <span class="nowrap">31 January</span> 2007</span>.</cite></li>

<li><cite id="CITEREFHaines,_Eric2007" class="citation web cs1"><a href="Eric_Haines" title="Eric Haines">Haines, Eric</a> (1 February 2007). <a rel="nofollow" class="external text" href="http://www.realtimerendering.com/">"Real-Time Rendering Resources"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">12 Feb</span> 2007</span>.</cite></li></ul>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="http://www.realtimerendering.com/portal/">RTR Portal</a> – a trimmed-down "best of" set of links to resources</li></ul>

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></div><div role="navigation" class="navbox authority-control" aria-labelledby="Authority_control_databases_frameless&#124;text-top&#124;10px&#124;alt=Edit_this_at_Wikidata&#124;link=https&#58;//www.wikidata.org/wiki/Q2816476#identifiers&#124;class=noprint&#124;Edit_this_at_Wikidata647" style="padding:3px"><table class="nowraplinks hlist mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Authority_control_databases_frameless&#124;text-top&#124;10px&#124;alt=Edit_this_at_Wikidata&#124;link=https&#58;//www.wikidata.org/wiki/Q2816476#identifiers&#124;class=noprint&#124;Edit_this_at_Wikidata647" style="font-size:114%;margin:0 4em">Authority control databases </div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">National</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"><ul><li><span class="uid"><a rel="nofollow" class="external text" href="https://id.loc.gov/authorities/sh2008009408">United States</a></span></li><li><span class="uid"><a rel="nofollow" class="external text" href="https://www.nli.org.il/en/authorities/987007540275505171">Israel</a></span></li></ul></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"><ul><li><span class="uid"><a rel="nofollow" class="external text" href="https://lux.collections.yale.edu/view/concept/d4eb9ec7-fd50-45ea-b339-08aaf8b98c5d">Yale LUX</a></span></li></ul></div></td></tr></tbody></table></div></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-02-26" href="https://en.wikipedia.org/wiki/?title=Real-time_computer_graphics&oldid=1277717771">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>